<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打卡拍照 - 江心漫屿</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/checkin.css">
</head>
<body class="bg-gradient-to-br from-green-50 to-blue-50 min-h-screen">
    <!-- 状态栏已移除 - 全面屏设计 -->

    <!-- 顶部导航 -->
    <div class="bg-white px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <button class="text-gray-600 hover:text-green-600 transition-colors">
                    <i class="fas fa-arrow-left text-lg"></i>
                </button>
                <h1 class="text-xl font-bold text-gray-800">打卡拍照</h1>
            </div>
            <div class="flex items-center space-x-3">
                <button class="text-gray-600 hover:text-green-600 transition-colors">
                    <i class="fas fa-history text-lg"></i>
                </button>
                <button class="text-gray-600 hover:text-green-600 transition-colors">
                    <i class="fas fa-share-alt text-lg"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="flex-1 px-6 py-4 space-y-4">
        <!-- 相机预览区域 -->
        <div class="relative bg-black rounded-2xl overflow-hidden" style="aspect-ratio: 4/3;">
            <!-- 模拟相机画面 -->
            <div class="camera-preview w-full h-full bg-gradient-to-br from-blue-900 via-blue-700 to-green-600 relative">
                <!-- 模拟江心屿景色 -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
                <div class="absolute top-1/4 left-1/4 w-16 h-20 bg-gray-700 rounded opacity-60"></div>
                <div class="absolute top-1/3 right-1/3 w-12 h-16 bg-gray-600 rounded opacity-50"></div>
                <div class="absolute bottom-1/4 left-1/3 w-20 h-8 bg-green-800 rounded opacity-70"></div>
                
                <!-- 拍照网格线 -->
                <div class="absolute inset-0">
                    <div class="grid grid-cols-3 grid-rows-3 w-full h-full">
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                        <div class="border border-white/30"></div>
                    </div>
                </div>
                
                <!-- 对焦框 -->
                <div class="focus-frame absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 border-2 border-white/80 rounded-lg">
                    <div class="absolute -top-1 -left-1 w-3 h-3 border-t-2 border-l-2 border-white/80"></div>
                    <div class="absolute -top-1 -right-1 w-3 h-3 border-t-2 border-r-2 border-white/80"></div>
                    <div class="absolute -bottom-1 -left-1 w-3 h-3 border-b-2 border-l-2 border-white/80"></div>
                    <div class="absolute -bottom-1 -right-1 w-3 h-3 border-b-2 border-r-2 border-white/80"></div>
                </div>
            </div>
            
            <!-- 顶部控制栏 -->
            <div class="absolute top-4 left-0 right-0 flex justify-between items-center px-4">
                <div class="flex items-center space-x-3">
                    <button class="camera-control-btn" id="flashBtn">
                        <i class="fas fa-bolt text-white"></i>
                    </button>
                    <button class="camera-control-btn" id="timerBtn">
                        <i class="fas fa-clock text-white"></i>
                    </button>
                </div>
                <div class="text-white text-sm font-medium">
                    <i class="fas fa-map-marker-alt mr-1"></i>
                    江心寺
                </div>
                <button class="camera-control-btn" id="switchCameraBtn">
                    <i class="fas fa-sync-alt text-white"></i>
                </button>
            </div>
            
            <!-- 底部信息栏 -->
            <div class="absolute bottom-4 left-0 right-0 px-4">
                <div class="flex justify-between items-center">
                    <div class="text-white text-xs">
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-sun"></i>
                            <span>自动</span>
                        </div>
                    </div>
                    <div class="text-white text-xs">
                        <div class="flex items-center space-x-2">
                            <i class="fas fa-image"></i>
                            <span>4:3</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 打卡信息 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-lg font-semibold text-gray-800">当前位置</h3>
                <div class="flex items-center space-x-2">
                    <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <span class="text-sm text-green-600 font-medium">已定位</span>
                </div>
            </div>
            <div class="space-y-2">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-map-marker-alt text-green-600"></i>
                    <span class="text-gray-700">江心屿景区 - 江心寺</span>
                </div>
                <div class="flex items-center space-x-3">
                    <i class="fas fa-clock text-green-600"></i>
                    <span class="text-gray-700">今日第 <span class="font-bold text-green-600">3</span> 次打卡</span>
                </div>
                <div class="flex items-center space-x-3">
                    <i class="fas fa-trophy text-green-600"></i>
                    <span class="text-gray-700">已获得 <span class="font-bold text-green-600">江心寺探索者</span> 徽章</span>
                </div>
            </div>
        </div>
        
        <!-- 拍照模式选择 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">拍照模式</h3>
            <div class="grid grid-cols-4 gap-3">
                <button class="mode-btn active" data-mode="normal">
                    <i class="fas fa-camera text-xl mb-1"></i>
                    <span class="text-xs">普通</span>
                </button>
                <button class="mode-btn" data-mode="portrait">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span class="text-xs">人像</span>
                </button>
                <button class="mode-btn" data-mode="landscape">
                    <i class="fas fa-mountain text-xl mb-1"></i>
                    <span class="text-xs">风景</span>
                </button>
                <button class="mode-btn" data-mode="ar">
                    <i class="fas fa-magic text-xl mb-1"></i>
                    <span class="text-xs">AR</span>
                </button>
            </div>
        </div>
        
        <!-- 最近打卡 -->
        <div class="bg-white rounded-2xl p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-lg font-semibold text-gray-800">最近打卡</h3>
                <button class="text-green-600 text-sm hover:text-green-700 transition-colors">
                    查看全部 <i class="fas fa-chevron-right ml-1"></i>
                </button>
            </div>
            <div class="grid grid-cols-3 gap-2">
                <div class="recent-photo">
                    <img src="https://images.unsplash.com/photo-1548678967-f1aec58f6fb2?w=200&h=200&fit=crop" alt="打卡照片" class="w-full h-20 object-cover rounded-lg">
                    <div class="photo-overlay">
                        <i class="fas fa-heart text-white text-sm"></i>
                        <span class="text-white text-xs">东塔</span>
                    </div>
                </div>
                <div class="recent-photo">
                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=200&fit=crop" alt="打卡照片" class="w-full h-20 object-cover rounded-lg">
                    <div class="photo-overlay">
                        <i class="fas fa-heart text-white text-sm"></i>
                        <span class="text-white text-xs">江心寺</span>
                    </div>
                </div>
                <div class="recent-photo">
                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=200&fit=crop" alt="打卡照片" class="w-full h-20 object-cover rounded-lg">
                    <div class="photo-overlay">
                        <i class="fas fa-heart text-white text-sm"></i>
                        <span class="text-white text-xs">西塔</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部拍照控制 -->
    <div class="bg-white border-t border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <!-- 相册按钮 -->
            <button class="gallery-btn" id="galleryBtn">
                <img src="https://images.unsplash.com/photo-1548678967-f1aec58f6fb2?w=60&h=60&fit=crop" alt="最新照片" class="w-12 h-12 object-cover rounded-lg">
            </button>
            
            <!-- 拍照按钮 -->
            <button class="capture-btn" id="captureBtn">
                <div class="capture-outer">
                    <div class="capture-inner"></div>
                </div>
            </button>
            
            <!-- 滤镜按钮 -->
            <button class="filter-btn" id="filterBtn">
                <i class="fas fa-palette"></i>
            </button>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-6 py-3">
        <div class="grid grid-cols-5 gap-1">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">首页</p>
            </div>
            <div class="text-center">
                <i class="fas fa-map text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">地图</p>
            </div>
            <div class="text-center">
                <i class="fas fa-camera text-green-600 text-xl mb-1"></i>
                <p class="text-green-600 text-xs">打卡</p>
            </div>
            <div class="text-center">
                <i class="fas fa-shopping-bag text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">商城</p>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-gray-400 text-xl mb-1"></i>
                <p class="text-gray-400 text-xs">我的</p>
            </div>
        </div>
    </div>

    <!-- 滤镜选择模态框 -->
    <div id="filterModal" class="modal hidden">
        <div class="modal-content">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">选择滤镜</h3>
                <button class="text-gray-500 hover:text-gray-700" id="closeFilter">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="grid grid-cols-3 gap-3">
                <div class="filter-option active" data-filter="none">
                    <div class="filter-preview bg-gray-200"></div>
                    <span class="text-sm">原图</span>
                </div>
                <div class="filter-option" data-filter="vintage">
                    <div class="filter-preview vintage"></div>
                    <span class="text-sm">复古</span>
                </div>
                <div class="filter-option" data-filter="warm">
                    <div class="filter-preview warm"></div>
                    <span class="text-sm">暖色</span>
                </div>
                <div class="filter-option" data-filter="cool">
                    <div class="filter-preview cool"></div>
                    <span class="text-sm">冷色</span>
                </div>
                <div class="filter-option" data-filter="vivid">
                    <div class="filter-preview vivid"></div>
                    <span class="text-sm">鲜艳</span>
                </div>
                <div class="filter-option" data-filter="mono">
                    <div class="filter-preview mono"></div>
                    <span class="text-sm">黑白</span>
                </div>
            </div>
        </div>
    </div>

    <script src="js/checkin.js"></script>
</body>
</html>